<template>
    <baidu-map 
      class="full"
      :center="{lng: 117.083244, lat: 48.589914}" 
      :zoom="zoom" :max-zoom="16" :min-zoom="7"
      :scroll-wheel-zoom="true"
    >
      <!-- 缩放 控件 -->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>

      <!-- 地图类型 控件 -->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-map-type>

      <!-- 描边 -->
      <bm-boundary name="呼伦贝尔市" :strokeWeight="2" strokeColor="blue" fillOpacity="0" />

      <bm-marker 
        v-for="(item, index) in pointList" :key="index" 
        :position="{lng: item.longitude, lat: item.latitude}" 
        :dragging="false" 
        @click="openSignDetail(item)"
      >
        <bm-info-window 
          :width=300 
          :show=" signDetail.phone && signDetail.phone == item.phone" 
          @close="signDetail = {}"
        >
          <div class="w_full flex_row_between">
            <div class="w_full-60">
              <div class="cursor" @click="goToMuHuPage(item)">牧户姓名： <u class="color_blue">{{ signDetail.name }}</u></div>
              <div>地址：{{ signDetail.townName + item.villageName }}</div>
            </div>
          </div>
        </bm-info-window>
      </bm-marker>

      <!-- 跳点 -->
      <!-- <bm-marker v-for="(item, index) in points" :key="index" :position="item" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
        <bm-label content="xxxxxxxxxxxxxx" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/>
      </bm-marker> -->

    </baidu-map>
</template>

<script>
  import defMixin from '@/mixins/def.js'
  import defImg from '@/mixins/def-img.js'

  export default {
    name: 'BaiDuMap',
    mixins: [defMixin, defImg],
    // props: {
    //   pointList: [
        
    //   ]
    // },
    data() {
      return {
        zoom: 8,
        signDetail: {},
        pointList: [
          {
            id:32,
            avatar:"http://xmy.5mus.com/public/uploads/20240925/6065835ebaf94fa0bb0197f8b7958635_苏雅拉达来-13948876686.jpg",
            name:"苏雅达来",
            phone:"13948876686",
            longitude:"116.792005",
            latitude:"48.690669",
            townId:"150727100000", townName:"阿拉坦额莫勒镇",
            villageId:"150727100001", villageName:"贝尔社区"
          },
          {
            id:158,
            avatar:"http://xmy.5mus.com/public/uploads/20240924/234350f891b340cea62d665afb65bdd0_浩斯巴雅尔+15049433589.jpg",
            nickName:"浩斯巴雅尔",
            phone:"15049433589",
            longitude:"116.983926",
            latitude:"48.381658",
            townId:"150727100000", townName:"阿拉坦额莫勒镇",
            villageId:"150727100004", villageName:"呼伦社区"
          },
          {
            id: 36,
            avatar: "http://xmy.5mus.com/public/uploads/20240924/7ca90e156920422286d987f83bfd657a_敖云孟都+13847717428.jpg",
            name: "敖云孟都",
            phone: "13847717428",
            longitude:"116.983926",
            latitude:"48.181658",
            townId:"150727100000", townName:"阿拉坦额莫勒镇",
            villageId:"150727100004", villageName:"呼伦社区"
          },
          {
            id: 34,
            avatar: "http://xmy.5mus.com/public/uploads/20240924/549ff3eb27ae4e508e9eebb01e7196c3_浩斯巴雅尔+18347746433.jpg",
            name: "浩斯巴雅尔",
            phone: "18347746433",
            longitude: "116.904349",
            latitude: "49.482517",
            townId: "150727102000", townName: "呼伦镇",
            villageId: "150727102001", villageName: "呼伦艾里社区"
          },
          {
            id: 173,
            avatar: "http://xmy.5mus.com/public/uploads/20240924/6c743621d3b34451a9fc1cf031abb803_同嘎拉格+13384807049.jpg",
            name: "嘎拉格",
            phone: "13384807049",
            longitude: "117.104349",
            latitude: "49.482517",
            townId: "150727102000", townName: "呼伦镇",
            villageId: "150727102001", villageName: "呼伦艾里社区"
          },
          {
            id: 268,
            avatar: "http://xmy.5mus.com/public/uploads/20240924/ba6075dd14c749c397932c644a9cb35b_达来.jpg",
            name: "阿拉腾达来",
            phone: "13847743634",
            longitude: "116.876263",
            latitude: "48.928971",
            townId: "150727202000", townName: "达赉苏木",
            villageId: "150727202201", villageName: "阿尔山布拉格嘎查"
          },
          {
            id: 42,
            avatar: "http://xmy.5mus.com/public/uploads/20240725/5609f2faf655435bb565a099fcd56e48_哈斯额尔德木图-13848549708.jpg",
            name: "哈斯额尔德木图",
            phone: "13848549708",
            longitude: "116.476263",
            latitude: "49.228971",
            townId: "150727202000", townName: "达赉苏木",
            villageId: "150727202201", villageName: "阿尔山布拉格嘎查"
          },
          {
            id: 266,
            avatar: null,
            name: "那仁满都呼",
            phone: "15847301868",
            longitude: "116.776263",
            latitude: "49.128971",
            townId: "150727202000", townName: "达赉苏木",
            villageId: "150727202201", villageName: "阿尔山布拉格嘎查"
          },
          {
            id: 38,
            avatar: "http://xmy.5mus.com/public/uploads/20240725/354066c206a84cbb8b9713fe119a9d81_乌宁呼-13847702784.jpg",
            name: "乌宁夫",
            phone: "13847702784",
            longitude: "116.295035",
            latitude: "48.523887",
            townId: "150727101000", townName: "阿日哈沙特镇",
            villageId: "150727101001", villageName: "满都拉社区"
          },
          {
            id: 152,
            avatar: "http://xmy.5mus.com/public/uploads/20240725/98ec2e20beb245f6b83a6b3c0285f25f_照日格图-13848673327.jpg",
            name: "照日格图",
            phone: "13848673327",
            longitude: "115.995035",
            latitude: "48.623887",
            townId: "150727101000", townName: "阿日哈沙特镇",
            villageId: "150727101001", villageName: "满都拉社区"
          },
          {
            id: 293,
            avatar: "http://xmy.5mus.com/public/uploads/20240729/feb26a33fb194ca18fd0274f4b7f944d_阿拉藤格日乐-13947703290.jpg",
            name: "阿拉藤格日乐",
            phone: "13947703290",
            longitude: "116.195035",
            latitude: "48.423887",
            townId: "150727101000", townName: "阿日哈沙特镇",
            villageId: "150727101001", villageName: "满都拉社区"
          },
          {
            id: 292,
            avatar: null,
            name: "乌日图那顺",
            phone: "15049496815",
            longitude: "116.195035",
            latitude: "48.823887",
            townId: "150727101000", townName: "阿日哈沙特镇",
            villageId: "150727101001", villageName: "满都拉社区"
          },
          {
            id: 275,
            avatar: "http://xmy.5mus.com/public/uploads/20240723/8f82a7fcbdde44b4835b9bdc018fc542_af096fe0-8e99-4cb2-aeba-8af6936bfb23.jpg",
            name: "乌力吉",
            phone: "13624871436",
            longitude: "115.669527",
            latitude: "48.102841",
            townId: "150727201000", townName: "克尔伦苏木",
            villageId: "150727201200", villageName: "克尔伦嘎查"
          },
          {
            id: 291,
            avatar: "http://xmy.5mus.com/public/uploads/20240729/e225af9a712c441c803fecf8a25cf826_布和巴雅尔-13947379322.jpg",
            name: "布和巴雅尔",
            phone: "13947379322",
            longitude: "115.769527",
            latitude: "48.052841",
            townId: "150727201000", townName: "克尔伦苏木",
            villageId: "150727201200", villageName: "克尔伦嘎查"
          },
          {
            id: 290,
            avatar: "http://xmy.5mus.com/public/uploads/20240729/8605ba8636e449428fc7ccb5f8c3ca67_林呼娃-15047365983.jpg",
            name: "莲花",
            phone: "13514772978",
            longitude: "115.869527",
            latitude: "47.852841",
            townId: "150727201000", townName: "克尔伦苏木",
            villageId: "150727201200", villageName: "克尔伦嘎查"
          },
          {
            id: 273,
            avatar: "http://xmy.5mus.com/public/uploads/20240724/dc85ca2cfba54bfc837d3369d4fdd306_嘎拉藏-.jpg",
            name: "嘎拉藏",
            phone: "13947742137",
            longitude: "116.269527",
            latitude: "48.152841",
            townId: "150727201000", townName: "克尔伦苏木",
            villageId: "150727201200", villageName: "克尔伦嘎查"
          },
          {
            id: 30,
            avatar: "http://xmy.5mus.com/public/uploads/20240725/54b66ca0083845e487cab4eb2f07ca2d_王世华-13947782600.jpg",
            name: "王世华",
            phone: "13947782600",
            longitude: "116.469527",
            latitude: "48.252841",
            townId: "150727201000", townName: "克尔伦苏木",
            villageId: "150727201200", villageName: "克尔伦嘎查"
          },
          {
            id: 289,
            avatar: "http://xmy.5mus.com/public/uploads/20240729/de1aff48da204286b6eb3b8c4069ddd8_胡雅图-15947073897.jpg",
            name: "胡雅图",
            longitude: "116.469527",
            latitude: "48.052841",
            townId: "150727201000", townName: "克尔伦苏木",
            villageId: "150727201200", villageName: "克尔伦嘎查"
          },
          {
            id: 288,
            avatar: "http://xmy.5mus.com/public/uploads/20240729/d2cb87cfdeea43419ad312308b88d522_宝音达来-15134843705.jpg",
            name: "宝音达来",
            phone: "15134843705",
            longitude: "116.109527",
            latitude: "48.052841",
            townId: "150727201000", townName: "克尔伦苏木",
            villageId: "150727201200", villageName: "克尔伦嘎查"
          },
          {
            id: 287,
            avatar: "http://xmy.5mus.com/public/uploads/20240729/f2eda961b1f44d598718508ea9ff9020_温都苏-13704774561.jpg",
            name: "温都苏",
            phone: "13704774561",
            longitude: "117.164307",
            latitude: "48.202061",
            townId: "150727203000", townName: "宝格德乌拉苏木",
            villageId: "150727203202", villageName: "哈如勒嘎查"
          },
          {
            id: 286,
            avatar: "http://xmy.5mus.com/public/uploads/20240729/a0d5e300f9974230923a9dc84103fe13_热瓦迪-15847476676.jpg",
            name: "热瓦迪",
            phone: "15847476676",
            longitude: "117.164307",
            latitude: "48.402061",
            townId: "150727203000", townName: "宝格德乌拉苏木",
            villageId: "150727203202", villageName: "哈如勒嘎查"
          },
          {
            id: 285,
            avatar: "http://xmy.5mus.com/public/uploads/20240924/646225bc87ea445b8f06a4ec7de4a3e0_宝音伊布格乐.jpg",
            name: "宝音伊布格乐",
            phone: "15849796473",
            longitude: "117.464307",
            latitude: "48.602061",
            townId: "150727203000", townName: "宝格德乌拉苏木",
            villageId: "150727203202", villageName: "哈如勒嘎查"
          },
          {
            id: 284,
            avatar: "http://xmy.5mus.com/public/uploads/20240924/683eb35215ea4e068dd95a6d1e7445d2_哈斯其劳+13514772967.jpg",
            name: "哈斯其劳",
            phone: "13514772967",
            longitude: "117.464307",
            latitude: "48.402061",
            townId: "150727203000", townName: "宝格德乌拉苏木",
            villageId: "150727203202", villageName: "哈如勒嘎查"
          },
          {
            id: 157,
            avatar: "http://xmy.5mus.com/public/uploads/20240725/06df72f8e3ed4409816adba2e3b9aa2b_青克乐-15894958044.jpg",
            name: "青克乐",
            phone: "15894958044",
            longitude: "117.264307",
            latitude: "48.002061",
            townId: "150727200000", townName: "贝尔苏木",
            villageId: "150727200202", villageName: "莫能塔拉嘎查"
          },
          {
            id: 267,
            avatar: null,
            name: "苏雅拉达来",
            phone: "15047768099",
            longitude: "117.633438",
            latitude: "48.16515",
            townId: "150727200000", townName: "贝尔苏木",
            villageId: "150727200202", villageName: "莫能塔拉嘎查"
          },
          {
            id: 282,
            avatar: null,
            name: "斯庆格日乐",
            phone: "13947755664",
            longitude: "117.316085",
            latitude: "48.100493",
            townId: "150727200000", townName: "贝尔苏木",
            villageId: "150727200202", villageName: "莫能塔拉嘎查"
          } 
        ]
      }
    },
    async mounted() {

    },
    methods: {
      openSignDetail(item) {
        this.signDetail = item
      },

      formatPosition(item) {
        return { longitude: item.longitude, latitude: item.latitude }
      },

      goToMuHuPage(item) {
        this.$router.push({
          path: `/muHuPage/${item.townId}/${item.townName}/${item.villageId}/${item.villageName}/${item.muhuId}/${item.name}/${item.phone}`
        })
      }
    }
  }
</script>

<style>
  .BMap_cpyCtrl, .anchorBL > a { display: none !important; }
</style>
